<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "diankangqi",
    methods: {
    },
    props: {
        translateX: { type: Number, default: 0 },
        translateY: { type: Number, default: 0 },
        rotate: { type: Number, default: 0 },
        scale: { type: Number, default: 1 },
        name: { type: String, default: '' },
        jg_name:{
            type:String,
            default:''
        },
        brandInfo:{
            type: String,
            default: ""
        },
        data_id:{
            type: String,
            default: ''
        },
        stateDesc:{
            type: String,
            default: ""
        },
        isMainPage:{
            type: Boolean,
        },
        color:{
            type: String,
            default: '#fff'
        },
        swidth:{
            type: [Number,String],
            default: 2
        },
        onlyCircle:{
            type: Boolean,
            default: false
        }
    },
    computed: {
        computedTransform() {
            return `
                translate(${this.translateX}, ${this.translateY})
                rotate(${this.rotate},81,200)
                scale(${this.scale})
            `;
        },
    },
})
</script>

<template>
    <svg>
        <g :transform="computedTransform" style="cursor: pointer">
            <path d="M90,260 A20,20 270 1,1 110,240"  :style="{stroke:'rgb(255,0,0)',strokeWidth:swidth}" fill="none" />
            <line x1="90" y1="240" x2="110" y2="240" :style="{stroke:'rgb(255,0,0)',strokeWidth:swidth}"/>
            <line v-if="!onlyCircle" x1="90" y1="200" x2="90" y2="240"  :style="{stroke:'rgb(255,0,0)',strokeWidth:swidth}"/>
            <line v-else x1="90" y1="220" x2="90" y2="240"  :style="{stroke:'rgb(255,0,0)',strokeWidth:swidth}"/>
            <g v-if="!onlyCircle">
<!--                <line x1="75" y1="210" x2="105" y2="210" :style="{stroke:'rgb(255,0,0)',strokeWidth:swidth}"/>-->
<!--                <line x1="78" y1="205" x2="102" y2="205"  :style="{stroke:'rgb(255,0,0)',strokeWidth:swidth}"/>-->
<!--                <line x1="81" y1="200" x2="99" y2="200"  :style="{stroke:'rgb(255,0,0)',strokeWidth:swidth}"/>-->
                <polyline transform="translate(0,-10)" points="60,220,60,210,120,210,120,220" :style="{stroke:'rgb(255,0,0)',strokeWidth:swidth}" fill="none"/>
            </g>

        </g>
    </svg>
</template>

<style scoped lang="less">

</style>
